
<!-- 充值结果页面 -->
<template>

	<div class="w750" :class="[!errorMsg ? 'white-bg' : '' , themes.theme]">

		<template v-if="!isEmpty">
			<!-- 充值成功 -->
			<div class="submit-success" v-if="!errorMsg">
				<div class="sub-suc-tit">
					<span class="suc-img">
						<i class="img"><img src="../../assets/images/submit-success.png" alt=""/></i>
						<em class="txt">充值成功</em>
					</span>
				</div>
				<div class="sub-suc-item">
					<p class="item-p" v-if="recargeInfo.payTypeName">
						<span class="tit">充值方式：</span>
						<span class="order-num">{{ recargeInfo.payTypeName }}</span>
					</p>
					<p class="item-p" v-else>
						<span class="tit">充值方式：</span>
						<span class="tit">获取数据有误</span>
					</p>
					<p class="item-p" v-if="recargeInfo.actualTotal">
						<span class="tit">充值金额：</span>
						<span class="order-price" :style="{'color':themes.color}">&#65509;{{ recargeInfo.actualTotal }}</span>
					</p>
					<p class="item-p" v-else="">
						<span class="tit">充值金额：</span>
						<span class="tit">获取数据有误</span>
					</p>
				</div>
				<div class="b-btn" @click="goPreDeposit"><span class="btn-r">完成</span></div>
			</div>
			<!-- 充值失败 -->
			<Noempty :pic="require('../../assets/images/record-empty.png')" :title="'数据错误'" v-else/>
		</template>
	</div>
</template>

<script>
import {mapState} from 'vuex'
import Noempty from 'components/Noempty/Noempty';
import { successOrderDetail } from 'api/preDeposit';
export default {
	components: {
		Noempty
	},
	data() {
		return {
			themes:applyStyle(),
			isEmpty: true,
			errorMsg: null,
			recargeInfo: null,
		};
	},
	created(){
		this.errorMsg = this.$route.query.message;
	},
	mounted() {
		let that = this;

		if(!this.errorMsg){
			let params = {
				subSettlementSn: this.$route.query.subSettlementSn,
				subSettlementType: this.$route.query.subSettlementType
			};

			successOrderDetail(params).then(res => {
				if (res.status == 1) {
					that.recargeInfo = res.result;
				}
			}).finally(res => {
				that.isEmpty = false;
			});
		}else{
			that.isEmpty = false;
		}
	},

	methods: {

		//跳转预存款页面
		goPreDeposit() {
			this.$router.replace('/preDeposit');
		}
	},
	computed: {
		...mapState(['themes']),
	},
};
</script>

<style src="../../assets/css/submit-order.css" scoped></style>
<style scoped>
body {
	background: #fff;
}
</style>
